<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>ACE Web IDE</title>
        <link rel="stylesheet" type="text/css" href="./css/aceWebIDE.css">
        <script src="./src/ace.js" type="text/javascript" charset="utf-8"></script>
        <script src="./src/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
        <script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="container">
            <div id="toolBar">
                <label>语言:</label>
                <select id="selectLanguage">
                    <option value="php">PHP</option>
                    <option value="html">HTML</option>
                    <option value="javascript">JS</option>
                    <option value="java">Java</option>
                    <option value="python">Python</option>
                    <option value="c_cpp">C_cpp</option>
                    <option value="r">R</option>
                    <option value="ruby">Ruby</option>
                    <option value="sql">Sql</option>
                    <option value="sh">Sh</option>
                    <option value="text">Text</option>
                </select>
                <label>主题:</label>
                <select id="selectTheme">
                    <option value="monokai">monokai</option>
                    <option value="clouds">clouds</option>
                    <option value="terminal">terminal</option>
                    <option value="dreamweaver">dreamweaver</option>
                    <option value="github">github</option>
                    <option value="chrome">chrome</option>
                    <option value="twilight">twilight</option>
                    <option value="chaos">chaos</option>
                    <option value="ambiance">ambiance</option>
                    <option value="clouds_midnight">clouds_midnight</option>
                    <option value="cobalt">cobalt</option>
                    <option value="tomorrow">tomorrow</option>
                    <option value="tomorrow_night">tomorrow_night</option>
                    <option value="xcode">xcode</option>
                    <option value="sqlserver">sqlserver</option>
                </select>
                <label>字体大小:</label>
                <select id="selectFTsize">
                    <option value="13">13px</option>
                    <option value="14">14px</option>
                    <option value="15">15px</option>
                    <option value="16">16px</option>
                    <option value="17">17px</option>
                    <option value="18" selected>18px</option>
                    <option value="19">19px</option>
                    <option value="20">20px</option>
                    <option value="21">21px</option>
                    <option value="22">22px</option>
                    <option value="23">23px</option>
                    <option value="24">24px</option>
                    <option value="32">32px</option>
                    <option value="48">48px</option>
                    <option value="60">60px</option>
                    <option value="72">72px</option>
                </select>
                <button id="run">Run</button>
            </div>
            <div id="codeEditor"></div>
            <div id="testView"></div>
            <div id="ResizeBtn"></div>
        </div>
    </body>
    <script type="text/javascript" charset="utf-8">
    function rendEditor(language="php",theme="monokai",ftsize=18){
        ftsize = Number(ftsize);
        editor = ace.edit("editor");//初始化对象
        editor.setTheme("ace/theme/" + theme);//主题
        editor.session.setMode("ace/mode/" + language);//语言类型
        editor.setFontSize(ftsize);//字体大小
        editor.setReadOnly(false); //设置只读（true时只读，用于展示代码）
        editor.setOption("wrap", "free");//自动换行,设置为off关闭
        //代码提示
        ace.require("ace/ext/language_tools");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        // var code = editor.getValue();//获取代码
        // console.log(code);
    }
    $(function(){
        //初始化代码、编辑器
        var oTestView = document.getElementById('testView');
        var codeEditor = document.getElementById('codeEditor');
        var containerPadding = 30;
        var toolBar = document.getElementById('toolBar');
        oTestView.style.height = window.innerHeight - 90 + "px";
        codeEditor.style.height = oTestView.style.height;
        var initCode = "<?php \n echo 'hello world!'; \n?>";
        var html = '<div id="editor"><textarea>'+initCode+'</textarea></div>';
        codeEditor.innerHTML = html;
        rendEditor();
        
        //切换语法
        $("#selectLanguage").on('change',function(){
            rendEditor($("#selectLanguage").val(),$("#selectTheme").val(),$("#selectFTsize").val());
        });
        //切换主题
        $("#selectTheme").on('change',function(){
            rendEditor($("#selectLanguage").val(),$("#selectTheme").val(),$("#selectFTsize").val());
        });
        //切换字体大小
        $("#selectFTsize").on('change',function(){
            rendEditor($("#selectLanguage").val(),$("#selectTheme").val(),$("#selectFTsize").val());
        });

        //运行JS
        $("#run").on("click", function(){
            if($("#selectLanguage").val() == "javascript"){
                var code = editor.getValue();//获取代码
                eval(code);//运行代码
            }else{
                alert('暂时仅支持运行JS');
            }
        });

        window.onresize = function (){
            oTestView.style.height = window.innerHeight - 90 + "px";
            codeEditor.style.height = oTestView.style.height;
            codeEditor.style.width = Math.floor(0.6 * toolBar.offsetWidth) + 'px';
            oTestView.style.width = toolBar.offsetWidth - codeEditor.offsetWidth +'px';
            $("#ResizeBtn").css({'left':codeEditor.offsetWidth + 10 + "px"});
        }

        // resize视图、编辑器
        $("#ResizeBtn").css({'left':codeEditor.offsetWidth + 10 + "px"});
        var oDiv = document.getElementById('ResizeBtn');
        var disX=0;
        oDiv.onmousedown=function(ev){
            var oEvent=ev||event;
            disX=oEvent.clientX-oDiv.offsetLeft;//鼠标和div左上角的距离
            document.onmousemove=function(ev){
                var oEvent=ev||event;
                var lt=oEvent.clientX-disX;//鼠标坐标减去距离得到div的位置坐标
                if(lt<500){
                    lt=500;   
                }
                else if(lt>document.documentElement.clientWidth-oDiv.offsetWidth-150){
                    lt=document.documentElement.clientWidth-oDiv.offsetWidth-150;
                }
                codeEditor.style.width = lt - 10 +'px';
                $('#testView').css({'width': window.innerWidth - containerPadding - lt + 10 + 'px'});
                
                oDiv.style.left=lt+'px';
            }
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
                rendEditor($("#selectLanguage").val(),$("#selectTheme").val(),$("#selectFTsize").val());
            }
            return false;
        }
    });

    </script>
</html>